<template>
  <el-table :data="historyList">
    <el-table-column label="名字" prop="name" />
    <el-table-column label="类型" prop="categories" />
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button size="mini" @click="getDetail(scope.row)">详情</el-button>
        <el-button size="mini" type="danger" @click="delHistory(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
import { useId } from '@/hooks/useId'
import { useRoute, useRouter } from 'vue-router';

const utools = window.utools
// hook
const { getId, delId } = useId();
// router
const router = useRouter()
const route = useRoute()

onMounted(() => {
  console.log('历史记录界面')
  getHistory()
})

// 历史记录列表
const historyList: Ref = ref([])

const getHistory = () => {
  let res = utools.db.allDocs('history')
  console.log('res', res)
  historyList.value = res.length ? res.map((ele: any) => {
    ele.categories = ele.categories.split('：')[1]
    return ele
  }) : []
}

const getDetail = (item: any) => {
  console.log('详情', item)
  router.push({
    name: 'detail',
    query: {
      id: item._id,
      log: 1
    }
  })
  
}

// 删除
const delHistory = (item: any) => {
  let res = delId(item._id)
  if (res) {
    getHistory()
  }
}
</script>

